<template lang="html">
  <Layout class="bg">
    <Header class="header">
      <Menu mode="horizontal" theme="dark" @on-select="select">
        <div class="layout-nav">
          <MenuItem name="user">
            <img :src="$route.name==='user'?require('@/assets/img/user_act.png'):require('@/assets/img/user.png')"/>
          </MenuItem>
          <MenuItem name="management">
            <img :src="$route.name==='management'?require('@/assets/img/management_act.png'):require('@/assets/img/management.png')"/>
          </MenuItem>
          <!-- <MenuItem name="bank">
            <img src="@/assets/img/bank.png"/>
          </MenuItem> -->
          <MenuItem name="shop">
            <img :src="$route.name==='shop'?require('@/assets/img/shop_act.png'):require('@/assets/img/shop.png')"/>
          </MenuItem>
          <MenuItem name="login">
            <img src="@/assets/img/logOut.png" @mouseenter="$event.target.src = require('@/assets/img/logOut_act.png')" @mouseleave="$event.target.src = require('@/assets/img/logOut.png')">
          </MenuItem>
        </div>
      </Menu>
    </Header>
    <Content>
      <router-view/>
    </Content>
  </Layout>
</template>

<script>
export default {
  name: 'layout',
  methods: {
    select(val) {
      this.$router.push(`/${val}`)
    }
  }
}
</script>

<style lang="stylus">
.ivu-layout {
  .header.ivu-layout-header {
    width: 1086px;
    height: 180px;
    background: transparent;
    margin: 0 auto;

    .ivu-menu {
      background: transparent;
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .ivu-layout-content {
    &>.ivu-card {
      width: 1086px;
      margin: 0 auto;
      padding: 0 32px;
      background: rgba(255, 255, 255, 0.88);
      border-radius: 15px;

      .ivu-card-head {
        border-bottom: none;
      }
    }
  }
}
</style>
